<template>
  <div class="_flex _flex-a-start _flex-around _p5 _wrapper app-container">
    <div
      class="_cart _wrapper-y _p5 _box-scroll _over-scroll-hidden _m-r-5"
      style="width: 12%"
    >
      <!-- <el-input v-model="likeRegion" size="small" placeholder="设备模糊搜索"></el-input> -->
      <el-tree
        :data="regionList"
        :props="{ label: 'name' }"
        node-key="indexCode"
        show-checkbox
        @check="regionChange"
      />
    </div>
    <div class="_cart _wrapper-y _p5 _m-r-5 _over-hidden" style="width: 12%">
      <div class="_wrapper _box-scroll _over-scroll-hidden">
        <el-input
          v-model="likeName"
          size="small"
          placeholder="设备模糊搜索"
        ></el-input>
        <el-radio-group style="width: 100%" v-model="currentCameraIndexCode">
          <div
            class="_wrapper-x"
            v-for="cameraIndexCode in filterCarmeList"
            :key="cameraIndexCode.cameraIndexCode"
          >
            <el-radio
              style="width: 100%; margin-top: 3px"
              class="_ellipsis"
              :label="cameraIndexCode.cameraIndexCode"
              size="small"
              border
            >
              {{ cameraIndexCode.cameraName }}({{
                cameraIndexCode.cameraTypeName
              }})
            </el-radio>
          </div>
        </el-radio-group>
        <el-input
          style="margin-top: 3px"
          v-model="customerCameraIndexCode"
          size="small"
          placeholder="请输入自定义cameraIndexCode"
          @keyup.enter="changeCameraIndexCode(customerCameraIndexCode)"
        >
        </el-input>
      </div>
    </div>
    <div class="_cart _flex-item-1 _wrapper-y">
      <VideoHkPlug
        :cameraIndexCode="currentCameraIndexCode"
        ref="videoHkPlugRef"
      />
    </div>
  </div>
</template>

<script>
// 海康插件播放组件
import hkApi from "./components/ApiHaikang";
import VideoHkPlug from "./components/video-hk-plug.vue";

export default {
  components: {
    VideoHkPlug,
  },
  data() {
    return {
      currentCameraIndexCode: "6d97475c2fce4457a453f459e0c966d5",
      customerCameraIndexCode: "",
      likeName: "",
      cameraIndexCodes: [],
      regionList: [],
      currentRegion: "",
      likeRegion: "",
    };
  },
  computed: {
    filterCarmeList() {
      if (!this.likeName) {
        return this.cameraIndexCodes;
      }
      return this.cameraIndexCodes.filter((item) => {
        return item.cameraName.indexOf(this.likeName) != -1;
      });
    },
  },
  mounted() {
    this.initRegions();
    this.inintCarmeList();
  },
  beforeUnmount() {
    this.$refs.videoHkPlugRef.closeVideo();
  },
  methods: {
    /**
     * 区域变更触发
     */
    regionChange(data, checkList) {
      this.inintCarmeList(checkList.checkedKeys);
    },
    /**
     * 初始化区域信息
     */
    initRegions() {
      hkApi.areaSearch().then((res) => {
        this.regionList = res;
      });
    },
    /**
     * 初始化监控点数据
     */
    inintCarmeList(checkedKeys) {
      if (checkedKeys && checkedKeys.length > 0) {
        this.cameraIndexCodes = [];
        checkedKeys.forEach((item) => {
          hkApi.cameraSearch(this.likeName, item).then((res) => {
            this.cameraIndexCodes = [...this.cameraIndexCodes, ...res];
          });
        });
      } else {
        hkApi.cameraSearch(this.likeName).then((res) => {
          this.cameraIndexCodes = res;
        });
      }
    },
    /**
     * 监控点变更
     * @param {Object} cameraIndexCode
     */
    changeCameraIndexCode(cameraIndexCode) {
      this.cameraIndexCodes.add({
        cameraIndexCode,
        cameraName: cameraIndexCode,
      });
      this.currentCameraIndexCode = cameraIndexCode;
    },
  },
};
</script>
<style>
.el-tree-node__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style scoped></style>
